<template>
  <div class="reason">
    <h2><b>心路历程</b></h2>
    <p>这个记单词的项目最初的雏形是我在大三上学期准备四级考试的时候为了记单词方便，结合当时学习的js基础，完成了一个简单的demo。大致逻辑一样，就是随机出现单词，然后基础了的单词不会再出现，同时点击不同的章节按钮会切换不同的单词本。</p>
    <p>但是当时由于有机械设计课程设计的压力，导致我完成项目的雏形只用了一天，项目的样式丑陋，功能简单。当时就感觉应该还有一些功能没有完成，但是由于当时的js基础不是很好，所以就暂时告一段落了。</p>
    <p>再次完善记单词的项目是2021年5月中旬也就是大三下学期。这一次我是学完了vue之后，然后看了一点点elementUI的文档。学vue的时候也跟着写了两个项目，一个是b站最好的vue教程里面的仿蘑菇街移动端项目，还有一个是在github里面找的一个入门级的vue项目。敲完了这两个项目之后我觉得我对vue有了一定的理解，js的掌握程度也有了一定的提升。所以我觉得我有能力实现我以前没有完成的功能。</p>
    <p>雏形的功能只有随机显示单词、切换单词本。我觉得我应该还有的功能就是单词本的所有单词预览、收藏单词、翻译显示。</p>
    <h2><b>翻译显示</b></h2>
    <p>由于我最开始储存单词的数据结构就是一个数组，数组里面就是一个个的单词的字符串。单词的翻译就是对应的纸质单词书。结果就是看的最多的还是纸质单词书，网页上面的项目只是为了巩固单词。所以我最先想到的功能其实是翻译显示。由于引入了翻译，简单的数据就不能满足功能了。然后存储单词的数据结构就变成了存放数组的数组。单词的翻译我是默认不显示的，因为不显示翻译才能记得更清楚，不然看到翻译就会觉得自己好像记得但是又好像不是很记得。</p>
    <h2><b>单词预览</b></h2>
    <p>这个其实是当时最想实现的功能，因为这样就可以不用再使用纸质单词书了。为了能突出与纸质单词书的区别，我给单词预览的每一个单词都添加了一个状态，分别表示：这个单词还没有显示、这个单词我记住了、这个单词我不知道；同时用不同的颜色去区分它们，这样我记单词的状态就能一目了然。</p>
    <h2><b>收藏单词</b></h2>
    <p>这个功能当时想过，只需要一个简单的数组就能实现了；但是刚学习js，完全不了解vue-router和vuex，所有的东西都在一个界面里面，导致一点都不美观，还影响操作。这一次我是用的对象存储的每一个单词，只需要为每个对象添加一个属性就能很方便的去操作样式了。这个样式的切换主要就是收藏和取消收藏。</p>
    <h2><b>最后的话</b></h2>
    <p>这个项目一方面是对vue的巩固，另一方面是对vue的加深理解。对于组件通信的这方面，我认识到了vuex的强大之处。使用vue-router来跳转路由也能让我的每一个界面都更加简洁。这个项目我最大的难点其实就是随机显示单词。最开始雏形是我复制了一个数组，然后在新数组里面进行删除操作，让我不能访问到已经记住的单词。为了能提高性能，这次我是反复思考了半天之后才想出的解决策略：创建一个数组用于保存记住单词的索引，然后随机获取数字，遍历数组看有没有这个索引。这样就能保证不会访问到已经记住了的单词。</p>
  </div>
</template>

<script>
export default {
  name: 'Reason'
}
</script>

<style scoped>
  .reason {
    padding:10px;
    background: #fff;
  }

  .reason h2 {
    font-size: 20px;
    margin: 10px 0;
  }

  .reason p {
    font-size: 16px;
    margin: 10px 0;
  }
</style>